import Header from './Header/Header';
import React, { useEffect, useState } from 'react';
import { produce } from 'immer';
import module from './Resume.module.scss';
import { Icon } from '@/components/Icon';
import NewFolder from '@/assets/images/newFolder.png';
import {
  DownloadOutlined,
  LoadingOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import loader from '@/assets/images/file-loader.gif';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

import { z } from 'zod';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  // FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
  Card,
  CardContent,
  // CardDescription,
  CardFooter,
  // CardHeader,
  // CardTitle,
} from '@/components/ui/card';
import {
  Dialog,
  DialogContent,
  // DialogDescription,
  // DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  deleteResume,
  deleteResumeList,
  filterResume,
  getResume,
  getResumeList,
  makeResumeFolder,
  putResumeFolder,
} from '@/apis/resume';
// import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { ViewResume } from '@/components/ViewResume';
import fold from '@/assets/images/fold.png';
import resumeImg from '@/assets/images/resume.png';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { message } from 'antd';
import UploadShow from './Uploading/UploadShow';
import { parseEventStream } from '@/utils/common';
interface FoldType {
  id: string;
  name: string;
  desc?: string;
}
interface ResumeType {
  id: number;
  folder_id: string;
  name: string;
  desc?: string;
  url: string;
}
interface checkResumeType {
  name: string;
  pdf_url: string;
  score: number;
  want_work: string;
}
const Resume: React.FC = () => {
  // const [resumeNum, setresumeNum] = useState<number>(0);
  //用来控制预览简历的
  const [showViewResumeDialog, setShowViewResumeDialog] =
    useState<boolean>(false);
  const [showDialogUrl, setshowDialogUrl] = useState<string>('');
  //用来控制新增或者重命名
  const [showAddChangeDialog, setshowAddChangeDialog] =
    useState<boolean>(false);
  const [folerMes, setFolerMes] = useState<FoldType>({
    id: '',
    name: '',
    desc: '',
  });
  const [reload, setReload] = useState<boolean>(false); //无其他用途，用来刷新而已
  const [checkList, setCheckList] = useState<checkResumeType[]>([]);
  const [foldClass, setFoldClass] = useState<{
    foldList: FoldType[];
    total: number;
  }>({
    foldList: [],
    total: 0,
  });

  const [resumeClass, setresumeClass] = useState<{
    resumeList: ResumeType[];
    total: number;
    page: number;
    page_size: number;
    loading: boolean;
    uploadResume: (val: FileList, currentId: string) => void;
    uploadResumeQuery: { File: File; id: number; folderId: string }[];
    removeResume: (id: number) => void;
    addResumeList: (url: string, name: string, Id: number) => void;
  }>({
    resumeList: [],
    total: 0,
    page: 0,
    page_size: 10,
    loading: false,
    uploadResumeQuery: [],
    uploadResume: (val, currentId) => {
      const newFiles = Array.from(val);
      // 验证文件类型
      const validFiles = newFiles.filter((file) => {
        const fileType = file.name.split('.').pop()?.toLowerCase();
        if (!['pdf', 'doc', 'docx'].includes(fileType || '')) {
          message.error(
            `文件 ${file.name} 格式不支持，仅支持 PDF、DOC、DOCX 格式`
          );
          return false;
        }
        return true;
      });
      const FinialFiles = validFiles.map((file) => ({
        File: file,
        id: Math.random() * 2000 + 1,
        folderId: currentId,
      }));
      //继续补充上去：
      setresumeClass((prev) => {
        const newState = {
          ...prev,
          uploadResumeQuery: [...prev.uploadResumeQuery, ...FinialFiles],
        };
        console.log('State after update:', newState.uploadResumeQuery);
        return newState;
      });
    },
    //这里的列表是右边的上传进度条的列表
    removeResume: (id) => {
      setresumeClass((prev) => {
        const newState = {
          ...prev,
          uploadResumeQuery: prev.uploadResumeQuery.filter(
            (item) => item.id !== id
          ),
        };
        console.log('State after update:', newState.uploadResumeQuery);
        // 在状态更新的回调中检查长度
        // if (newState.uploadResumeQuery.length === 0) {
        //   // fetchResumeList(); // 触发获取最新列表的函数
        //   resetResumeClass();
        //   setReload((prev) => !prev);
        // }
        return newState;
      });
    },
    addResumeList: (url, name, id) => {
      setresumeClass((prev) => ({
        ...prev,
        total: prev.total + 1,
        resumeList: [
          ...prev.resumeList,
          { id: id, name: name, url: url, folder_id: folerMes.id },
        ],
      }));
    },
  });
  const [checkIng, setCheckIng] = useState<boolean>(false);
  const [showType, setshowType] = useState<'folder' | 'file'>('folder');
  //---新建文件夹和重命名相关
  const DialogformSchema = z.object({
    username: z.string().min(2, {
      message: '名字必须大于2个字符',
    }),
    //desc不为必须
    desc: z.string().optional(),
  });
  const nameForm = useForm<z.infer<typeof DialogformSchema>>({
    resolver: zodResolver(DialogformSchema),
    defaultValues: {
      username: '',
      desc: '',
    },
  });
  async function onSubmitName(values: z.infer<typeof DialogformSchema>) {
    console.log(values, nowRenameFolder);
    if (showType === 'folder') {
      if (nowRenameFolder && nowRenameFolder.id) {
        const data = {
          name: values.username,
          folder_id: nowRenameFolder.id,
        };
        const res = await putResumeFolder(data);
        if (res.code === 200) {
          message.success('重命名成功');
          changeDialogShow(false);
          setFoldClass(
            produce((draft) => {
              draft.foldList.map((item) => {
                if (item.id === nowRenameFolder.id) {
                  item.name = values.username;
                }
                return item;
              });
            })
          );
        } else {
          message.error(res.message || '重命名失败');
        }
      } else {
        const data = {
          name: values.username,
        };
        const res = await makeResumeFolder(data);
        if (res.code === 200) {
          message.success('新建文件夹成功');
          setReload(!reload);
          changeDialogShow(false);
        } else {
          message.error(res.message || '新建文件夹失败');
        }
      }
    }
  }

  //---
  //---右侧搜索相关
  const searchformSchema = z.object({
    skill: z.string().min(1, {
      message: '要求技能不能为空',
    }),
    // experience: z.string(),
    number: z
      .number()
      .min(1, {
        message: '要求简历数量不能为空',
      })
      .gt(0, { message: '要求简历数量必须大于0' }),
    resumeId: z.string().min(1, { message: '简历库不能为空' }),
  });
  const searchForm = useForm<z.infer<typeof searchformSchema>>({
    resolver: zodResolver(searchformSchema),
    defaultValues: {
      skill: '',
      // experience: '',
      number: 0,
      resumeId: '',
    },
  });
  async function onSubmitSearch(values: z.infer<typeof searchformSchema>) {
    console.log(values);
    setCheckIng(true);
    const data = {
      condition: values.skill,
      // experience: values.experience,
      need_num: values.number,
      folder_id: Number(values.resumeId),
    };
    filterResume(data).then(async ({ reader, decoder }) => {
      // 循环读取流数据
      let done = false;
      while (!done) {
        // 读取流中的一部分
        const { value, done: doneReading } = await reader.read();
        done = doneReading;
        if (!done) {
          let buffer = '';
          buffer = decoder.decode(value, { stream: true });
          if (buffer) {
            const res = parseEventStream(buffer);
            console.log(res);
            setCheckList(res.content || []);
            setCheckIng(false);
          }
        }
      }
      // console.log(resText);
    });
  }
  const researchForm = () => {
    searchForm.reset({
      skill: '',
      // experience: '',
      number: 1,
      resumeId: '',
    });
  };
  //---
  const showFolderDetail = (item: FoldType) => {
    setshowType('file');
    setFolerMes(item);
  };
  const delFolder = (id: string) => {
    deleteResumeList(id).then((res) => {
      if (res.code === 200) {
        message.success('删除成功');
        setFoldClass(
          produce((draft) => {
            draft.foldList = draft.foldList.filter((item) => item.id !== id);
          })
        );
      } else {
        message.error(res.message || '删除失败');
      }
    });
  };
  const delResume = (id: number) => {
    deleteResume(id).then((res) => {
      if (res.code === 200) {
        message.success('删除成功');
        setresumeClass(
          produce((draft) => {
            draft.resumeList = draft.resumeList.filter(
              (item) => item.id !== id
            );
          })
        );
      } else {
        message.error(res.message || '删除失败');
      }
    });
  };
  const handleScroll = async (e: React.UIEvent<HTMLDivElement>) => {
    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;

    if (scrollHeight - scrollTop - clientHeight < 20) {
      if (resumeClass.resumeList.length < resumeClass.total) {
        if (resumeClass.loading) return;
        setresumeClass(
          produce((draft) => {
            draft.loading = true;
          })
        );
        setTimeout(async () => {
          await fetchResumeList();
          setresumeClass(
            produce((draft) => {
              draft.loading = false;
            })
          );
        });
      }
    }
  };
  const [nowRenameFolder, setnowRenameFolder] = useState<FoldType>({
    id: '',
    name: '',
    desc: '',
  });
  const reNameFolder = (item: FoldType) => {
    setnowRenameFolder(item);
    nameForm.reset({
      username: item.name,
      desc: item.desc,
    });
    setshowAddChangeDialog(true);
  };
  const changeDialogShow = (e: boolean) => {
    setshowAddChangeDialog(e);
    if (!e) {
      nameForm.reset({
        username: '',
        desc: '',
      });
      setnowRenameFolder({ id: '', name: '', desc: '' });
    }
  };
  const preViewResume = (url: string) => {
    setShowViewResumeDialog(true);
    setshowDialogUrl(url);
  };
  const fetchFolderList = async () => {
    const res = await getResumeList();
    if (res.code === 200) {
      setFoldClass(
        produce((draft) => {
          draft.total = res.data.total;
          draft.foldList = res.data.list;
        })
      );
    }
    console.log(res);
  };
  const fetchResumeList = async () => {
    console.log(resumeClass);
    const data = {
      folder_id: folerMes.id,
      page: resumeClass.page + 1,
      page_size: resumeClass.page_size,
    };
    const res = await getResume(data);
    if (res.code === 200) {
      setresumeClass(
        produce((draft) => {
          draft.total = res.data.total;
          draft.resumeList = [...draft.resumeList, ...res.data.list];
          draft.page = draft.page + 1;
        })
      );
      console.log(resumeClass.resumeList);
    }
    console.log(res);
  };
  const resetResumeClass = async () => {
    await setresumeClass(
      produce((draft) => {
        draft.page = 0;
        draft.resumeList = [];
        draft.total = 0;
        draft.loading = false;
      })
    );
  };
  useEffect(() => {
    const init = async () => {
      await resetResumeClass();
      setTimeout(() => {
        showType === 'folder' ? fetchFolderList() : fetchResumeList();
      });
    };
    init();
  }, [showType, reload]);

  const [optionList, setOptionList] = useState<{ id: string; name: string }[]>(
    []
  );
  const getResumeOption = async (e: boolean) => {
    // console.log(e);
    if (e) {
      const res = await getResumeList();
      console.log(res);
      if (res.code === 200) {
        setOptionList(res.data.list);
      }
    }
  };
  //文件夹卡片
  function folder(item: FoldType) {
    return (
      <Card
        key={item.id}
        className="mt-[5px] flex h-[30px] cursor-pointer justify-between rounded-[4px] pl-3"
      >
        <div
          className="flex items-center"
          onClick={() => showFolderDetail(item)}
        >
          <Icon
            url={fold}
            width={18}
            height={15}
            className="hover:opacity-60"
          />
          <span className="font-Regular ml-[13px] mr-[13px] text-[#1C1C1C] hover:opacity-60">
            {item.name}
          </span>
          <span className="mr-[13px] text-[#D4D4D4]">{item.desc}</span>
        </div>
        <div className="flex items-center">
          {/* font-weight: 400; font-size: 15px; color: #417FEA; */}
          <div
            className="mr-[12px] cursor-pointer text-[15px] font-[400] leading-[13px] text-[#417FEA] hover:opacity-60"
            onClick={() => reNameFolder(item)}
          >
            重命名
          </div>
          <div
            className="mr-[12px] cursor-pointer text-[15px] font-[400] leading-[13px] text-[#F5574D] hover:opacity-60"
            onClick={() => delFolder(item.id)}
          >
            删除
          </div>
        </div>
      </Card>
    );
  }
  //文件卡片
  function resume(item: ResumeType) {
    return (
      <Card
        className="mt-[5px] flex h-[30px] cursor-pointer justify-between rounded-[4px] pl-3"
        key={item.id}
      >
        <div
          className="flex items-center"
          onClick={() => preViewResume(item.url)}
        >
          <Icon
            url={resumeImg}
            width={18}
            height={15}
            className="hover:opacity-60"
          />
          <span className="font-Regular ml-[13px] mr-[13px] text-[#1C1C1C] hover:opacity-60">
            {item.name}
          </span>
          <span className="mr-[13px] text-[#D4D4D4]">{item.desc}</span>
        </div>
        <div className="flex items-center">
          {/* font-weight: 400; font-size: 15px; color: #417FEA; */}
          <div
            className="mr-[12px] cursor-pointer text-[15px] font-[400] leading-[13px] text-[#F5574D] hover:opacity-60"
            onClick={() => delResume(item.id)}
          >
            删除
          </div>
        </div>
      </Card>
    );
  }
  //已筛选卡片
  function checkResume(item: checkResumeType) {
    return (
      <Card
        className="mt-[5px] flex h-[30px] cursor-pointer justify-between rounded-[4px] pl-3"
        key={item.name + Math.random()}
      >
        <div
          className="flex items-center"
          onClick={() => preViewResume(item.pdf_url)}
        >
          <Icon
            url={resumeImg}
            width={18}
            height={15}
            className="hover:opacity-60"
          />
          <span className="font-Regular ml-[13px] mr-[13px] text-[#1C1C1C] hover:opacity-60">
            {item.name}
          </span>
          <span className="mr-[13px] text-[#D4D4D4]">{item.score}分</span>
        </div>
      </Card>
    );
  }
  const dialogType = () => {
    return (
      <Dialog
        open={showAddChangeDialog}
        onOpenChange={(e) => changeDialogShow(e)}
      >
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>
              {nowRenameFolder.id ? '重命名文件夹' : '新增文件夹'}
            </DialogTitle>
          </DialogHeader>
          <Form {...nameForm}>
            <form
              onSubmit={nameForm.handleSubmit(onSubmitName)}
              className="space-y-8"
            >
              <FormField
                control={nameForm.control}
                name="username"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>名称</FormLabel>
                    <FormControl>
                      <Input placeholder="请输入名称" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={nameForm.control}
                name="desc"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>描述</FormLabel>
                    <FormControl>
                      <Input placeholder="请输入描述" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              {/* <DialogFooter> */}
              <Button type="submit" className="float-right">
                保存
              </Button>
              {/* </DialogFooter> */}
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    );
  };

  return (
    <>
      <div className="flex h-[450px] w-full justify-center p-[12px] pr-[5px]">
        {' '}
        <div className="flex-[0.7]">
          <Header
            url={'headerResume'}
            name={'简历库'}
            IconWeight={22}
            IconHeight={29}
          />
          <Breadcrumb className="mb-[3px] mt-[3px]">
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink
                  onClick={() => {
                    setshowType('folder');
                  }}
                >
                  Home
                </BreadcrumbLink>
              </BreadcrumbItem>
              {showType === 'file' && (
                <>
                  <BreadcrumbSeparator />
                  <BreadcrumbItem>
                    <BreadcrumbLink>
                      {folerMes.name || '默认文件'}
                    </BreadcrumbLink>
                  </BreadcrumbItem>
                </>
              )}
            </BreadcrumbList>
          </Breadcrumb>
          <Card
            className={`rouded-[3px] relative mt-[5px] h-[332px] w-full px-[10px] pb-[11px] pt-[5px]`}
          >
            {foldClass.total > 0 && showType === 'folder' && (
              <div className="h-[102%] w-full overflow-auto">
                {foldClass.foldList.map((item) => {
                  return folder(item);
                })}
                <PlusOutlined
                  className="ml-3 mt-3 cursor-pointer hover:opacity-60"
                  onClick={() => setshowAddChangeDialog(true)}
                />
              </div>
            )}

            {foldClass.total <= 0 && showType === 'folder' && (
              <Button
                onClick={() => setshowAddChangeDialog(true)}
                variant="outline"
                className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] border-0 text-[19px] font-[400] text-[#8E8E8E]"
              >
                请先新建文件夹用来存放需要筛选的简历 +
              </Button>
            )}
            {showType === 'file' && resumeClass.total > 0 && (
              <div
                className="h-[102%] w-full overflow-auto"
                onScroll={handleScroll}
              >
                {resumeClass.resumeList.map((item) => {
                  return resume(item);
                })}
                <div className="relative">
                  <PlusOutlined className="ml-3 mt-3 cursor-pointer hover:opacity-60" />
                  <Input
                    onChange={(e) => {
                      resumeClass.uploadResume(
                        e.target.files as FileList,
                        folerMes.id
                      );
                    }}
                    multiple
                    type="file"
                    accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                    className="absolute left-[50%] top-[50%] h-full w-full translate-x-[-50%] translate-y-[-50%] cursor-pointer border-0 text-[19px] font-[400] text-[#8E8E8E] opacity-0"
                  ></Input>
                </div>
              </div>
            )}
            {resumeClass.total <= 0 && showType === 'file' && (
              <Button
                variant="outline"
                className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] border-0 text-[19px] font-[400] text-[#8E8E8E]"
              >
                请先上传文件
                <Input
                  accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                  type="file"
                  multiple
                  className="absolute left-[50%] top-[50%] h-full w-full translate-x-[-50%] translate-y-[-50%] opacity-0"
                  onChange={(e) => {
                    resumeClass.uploadResume(
                      e.target.files as FileList,
                      folerMes.id
                    );
                  }}
                ></Input>
              </Button>
            )}
          </Card>

          <div className="mt-[14px] flex w-full justify-between">
            <div>
              {' '}
              {showType === 'folder' && (
                <>
                  {' '}
                  <Button
                    className={`h-[43px] w-[239px] rounded-[22px] bg-[#417FEA] ${module.shadow}`}
                    onClick={() => setshowAddChangeDialog(true)}
                  >
                    <Icon url={NewFolder} width={22} height={22} /> 新建文件夹
                  </Button>
                  {/* <span className="ml-[14px] text-[16px] font-normal text-[#8E8E8E]">
                    当前共{0}份待筛选简历
                  </span> */}
                </>
              )}
            </div>

            {/* <Button
              className={`h-[43px] w-[170px] rounded-[22px] bg-[#CD4DF5] ${module.shadow}`}
            >
              开始筛选
            </Button> */}
          </div>
        </div>
        <div className="h-full w-[21px]"></div>
        <div className="flex-[0.3]">
          <Header
            url={'headerSearch'}
            name={'技能筛选'}
            IconHeight={22}
            IconWeight={22}
          />
          {/* <div className=" bg-green-200"></div> */}
          <Card className="mt-[5px] h-[415px] w-full pt-[10px]">
            <CardContent>
              <Form {...searchForm}>
                <form>
                  {/* Skill Field */}
                  <FormField
                    control={searchForm.control}
                    name="skill"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>技能</FormLabel>
                        <FormControl>
                          <Textarea
                            placeholder="例如: JavaScript, Python, C++等"
                            className="h-[120px] resize-none overflow-auto"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  {/* Experience Field */}
                  {/* <FormField
                    control={searchForm.control}
                    name="experience"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>工作经验（年）</FormLabel>
                        <FormControl>
                          <Input placeholder="无/3" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  /> */}

                  {/* Number Field */}
                  <FormField
                    control={searchForm.control}
                    name="number"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>需求简历份数</FormLabel>
                        <FormControl>
                          <Input
                            placeholder="5"
                            {...field}
                            type="number"
                            onChange={(e) =>
                              field.onChange(Number(e.target.value))
                            }
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={searchForm.control}
                    name="resumeId"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>需求简历库</FormLabel>
                        <FormControl>
                          <Select
                            onOpenChange={(e) => getResumeOption(e)}
                            value={String(field.value)}
                            onValueChange={field.onChange}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="选择简历库" />
                            </SelectTrigger>
                            <SelectContent>
                              {optionList.map((item) => (
                                <SelectItem
                                  value={String(item.id)}
                                  key={item.id}
                                >
                                  {item.name}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </form>
              </Form>
            </CardContent>
            <CardFooter className="flex flex-col">
              <div className="flex w-full justify-between">
                <Button
                  variant="outline"
                  onClick={researchForm}
                  className="w-[131px] border border-[#417FEA] text-[#417FEA]"
                >
                  重置条件
                </Button>
                {/* Save Button */}
                <Button
                  disabled={checkIng}
                  onClick={() => searchForm.handleSubmit(onSubmitSearch)()} // Handle form submit
                  variant="outline"
                  className="w-[131px] border border-[#151515] text-[#151515]"
                >
                  {checkIng && <LoadingOutlined />}
                  开始筛选
                </Button>
              </div>
              {checkIng && (
                <div className="mt-3 w-full">
                  <img
                    src={loader}
                    className="w- h-[4px] w-full"
                    alt="Loader"
                  />
                </div>
              )}

              {/* Reset Button */}
            </CardFooter>
          </Card>
        </div>
      </div>
      <div className="mt-[13px] p-[12px]">
        {' '}
        <Card
          className={`rouded-[3px] relative mt-[5px] h-[208px] w-full p-[3px]`}
        >
          {checkList.length > 0 ? (
            checkList.map((item) => checkResume(item))
          ) : (
            <div className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] text-[19px] font-[400] text-[#8E8E8E]">
              当前没有已经筛选好的文件，请上传文件，并补充条件进行筛选
            </div>
          )}
        </Card>
        <div className="mt-[14px]">
          {' '}
          <Button
            className={`h-[43px] w-[239px] rounded-[22px] bg-[#F5574D] ${module.shadow}`}
          >
            <DownloadOutlined style={{ fontSize: '25px' }} /> 批量下载
          </Button>
          <span className="ml-[14px] text-[16px] font-normal text-[#8E8E8E]">
            当前共{checkList.length}份已筛选简历
          </span>
        </div>
      </div>
      <ViewResume
        url={showDialogUrl}
        show={showViewResumeDialog}
        onChange={setShowViewResumeDialog}
        title={'预览文件'}
      />
      {dialogType()}
      <UploadShow
        reSeturl={resumeClass.addResumeList}
        files={resumeClass.uploadResumeQuery}
        remove={resumeClass.removeResume}
      />
    </>
  );
};
export default Resume;
